<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';

// 引入子组件
import WelcomeSection from './modules/welcome-section.vue';
import SmartSearch from './modules/smart-search.vue';
import GpuAdapter from './modules/gpu-adapter.vue';
import AiFramework from './modules/ai-framework.vue';
import FaultDiagnosis from './modules/fault-diagnosis.vue';
import AiAnalysis from './modules/ai-analysis.vue';
import StatusCards from './modules/status-cards.vue';
import SystemInfo from './modules/system-info.vue';
import PerformanceMonitor from './modules/performance-monitor.vue';
import DiagnosticProcess from './modules/diagnostic-process.vue';
import VoiceDiagnosis from './modules/voice-diagnosis.vue';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <NSpace vertical :size="16">
    <!-- 导航菜单已通过全局布局提供 -->
    <WelcomeSection />
    <SmartSearch />
    
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:8">
        <GpuAdapter />
      </NGi>
      <NGi span="24 s:24 m:8">
        <AiFramework />
      </NGi>
      <NGi span="24 s:24 m:8">
        <FaultDiagnosis />
      </NGi>
    </NGrid>
    
    <AiAnalysis />
    
    <StatusCards />
    
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <SystemInfo />
      </NGi>
      <NGi span="24 s:24 m:10">
        <PerformanceMonitor />
      </NGi>
    </NGrid>
    
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <DiagnosticProcess />
      </NGi>
      <NGi span="24 s:24 m:10">
        <VoiceDiagnosis />
      </NGi>
    </NGrid>
  </NSpace>
</template>

<style scoped></style>